<template>
	<view class="p-8  fs-15">
		<view class='bg-white p-15 round-8 mt-20'>
			<text class="fw-600">音色名称</text>
			<view class="bg-fa round-6 mt-6 p-12">
				<input placeholder="请输入音色名称..." class="fs-14" v-model="form.title" />
			</view>
		</view>
		<view class='bg-white p-15 round-8 mt-20 flex flex-x-space-between' @click="open">
			<text class="fw-600">克隆模式</text>
			<view class="flex flex-y-center gap-4">
				{{ voiceChannelMap.find(item => item.value === form.voiceChannel)?.label }} <text
					class='iconfont icon-youjiantou'></text>
			</view>
		</view>
		<view class="w-p-100 flex flex-column gap-6 mt-20 bg-white p-15">
			<text class="fw-600">上传音频</text>
			<view class="flex flex-center ">
				<y-record @success="onSuccess"></y-record>
			</view>
		</view>
		<y-footer @success="submit">{{sbumitText}} </y-footer>
		<y-popup ref="popup" mode='bottom' round='8px'>
			<view v-for="(item,index) in voiceChannelMap" class="w-p-100 wa py-8 text-center  border-bottom-f1 "
				@click="form.voiceChannel=item.value;popup.close();">
				{{item.label}}
			</view>
			<view class="bg-white round-8 py-8 text-center text-red wa" @click="popup.close()">取消</view>
		</y-popup>
	</view>
</template>

<script setup>
	import { onMounted, reactive, ref, watch, computed } from 'vue';
	import { uploadAudio } from '@/api/system'
	import { createVoice } from '@/api/voice.js'
	import { $page, $tool } from '@/utils';
	import { useRefs, useUserStore, useWebConfigStore } from '@/stores'
	import { onLoad } from '@dcloudio/uni-app'
	const { WEBCONFIG } = useRefs(useWebConfigStore())

	const sbumitText = computed(() => {
		if (points.value == 0) {
			return '免费创建';
		}
		return '克隆音色 消耗算力:' + points.value
	})
	const recorder = ref({
		url: '',
		file: null,
		duration: 0
	})
	const voiceChannelMap = reactive([
		{ value: 1, label: '普通语音' },
		{ value: 2, label: '深度语音' },
		// { value: 3, label: '专业语音' },
	])

	const { USERINFO } = useRefs(useUserStore())
	const popup = ref()
	const form = ref({
		title: '',
		url: '',
		duration: 0,
		voiceChannel: 1
	})

	const points = ref(0)
	watch(() => form.value.voiceChannel, (newVal) => {
		if (newVal === 1) {
			points.value = WEBCONFIG.value.voicePoint
		} else if (newVal === 2) {
			points.value = WEBCONFIG.value.voiceDeepPoint
		} else {
			points.value = 0
		}
	}, { immediate: true })

	onLoad(() => {
		if (WEBCONFIG?.value?.voiceChannel != 9999) {
			form.value.voiceChannel = WEBCONFIG?.value?.voiceChannel || 1
		}
	})

	const onSuccess = (e) => {
		recorder.value = e
		form.value.duration = e.duration
	}

	const submit = () => {
		if (form.value.title == '' || (recorder.value.url == '' && recorder.value.file == null)) {
			$tool.toast('请填写完整数据', 'error');
			return;
		}
		uni.showLoading({
			title: '创建中...',
			mask: true
		})
		if (form.value.url) {
			createVoice(form.value).then(res => {
				uni.hideLoading()
				$tool.toast('创建成功')
				setTimeout(() => {
					$page.back();
				}, 500)
			})
		} else {
			try {
				uploadAudio({
					// #ifdef MP-WEIXIN
					filePath: recorder.value.url,
					// #endif
					// #ifdef H5
					file: recorder.value.file
					// #endif
				}).then(result => {
					form.value.url = result.data.file_url
					createVoice(form.value).then(res => {
						uni.hideLoading()
						$tool.toast('创建成功')
						setTimeout(() => {
							$page.back();
						}, 500)
					})
				}).catch(err => {
					uni.hideLoading()
					$tool.toast(err.msg);
				})
			} catch (err) {
				uni.showModal({
					title: '错误',
					content: err
				})
			}
		}
	}

	const open = () => {
		if (WEBCONFIG.value.voiceChannel == 9999) {
			popup.value.open()
		}
	}
</script>

<style>

</style>